<template>
    <div id='price'>
        <div class='title'><span>价格区间:</span></div>
        <div class='context'>
            <input type="text" name="" value="" placeholder="¥" @focus="focuFn">
            <span>—</span>
            <input type="text" name="" value="" placeholder="¥" @focus="focuFn">
            <button>确定</button>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        focuFn(){
            let btnEle = document.querySelector('.context button')
            btnEle.style.display='inline-block'
        },
        makeSure(){

        }
    }
}
</script>
<style>
    #price{
        height:40px;
        border: 1px solid #eee;
    }
    #price>div{
        height:40px;
        float: left;
    }
    .title{
        width:68px;
        line-height: 40px;
    }
    .context{
        border-right: 1px solid #eee;
        padding: 4px;
        box-sizing: border-box;
    }
    .context input{
        width:44px;
        height:20px;
        border: 1px solid #eee;
        padding: 1px;
    }
    .context button{
        outline: none;
        border: none;
        background:#f40;
        color: #fff;
        width: 42px;
        height: 22px;
        font-size: 12px;
        margin-left: 6px;
        border-radius: 2px;
        display: none;
    }
</style>